import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
import QtQuick.Controls.Basic 2.15
import "../components"
import "../Utils.js" as U

Rectangle {
    id: bottomBar
    width: parent.width
    color: p_theme.currentTheme().backgroundColor
    property bool player: playContent.playing
    property var theme: p_theme.currentTheme()
    property bool mute: false
    property int volume: 70
    property int lastVolume: 70

    function onRealVolumeChange(val) {
        if (volume / 100 !== val) {
            volume = val * 100;
            setVolume(volume);
        }
    }
    Component.onCompleted: {
        playContent.volmue = volume / 100;
        p_db.getValue("mute").then(res => {
            if (res !== null) {
                mute = (+res == 1);
            }
        });
    }
    Component.onDestruction: {
        p_db.setValue("mute", `${mute ? 1 : 0}`);
    }
    onVolumeChanged: {
        playContent.volmue = volume / 100;
    }
    onMuteChanged: {
        if (!mute && volume === 0) {
            setVolume(lastVolume);
        }
        if (mute) {
            lastVolume = volume;
            volumeSlider.value = 0;
        }
    }
    function setVolume(v) {
        volumeSlider.value = v;
    }

    Item {
        anchors.centerIn: parent
        width: parent.width - 40
        height: parent.height - 10
        Row {
            anchors.verticalCenter: parent.verticalCenter
            spacing: 10
            RoundedImage {
                id: musicIcon
                size: 65
                radius: 10
                anchors.verticalCenter: parent.verticalCenter
                source: playContent.musicImg === '' ? "qrc:/icon/logo.png" : U.imgUrlAccurate(playContent.musicImg, width, height)
                smooth: true
                onLoaded: {
                    appearAnim.restart();
                }
                NumberAnimation {
                    id: appearAnim
                    target: musicIcon
                    property: "scale"
                    from: 0
                    to: 1
                    duration: 1000
                    easing.type: Easing.OutExpo
                }
            }
            Column {
                height: 65
                anchors.verticalCenter: parent.verticalCenter
                width: (parent.parent.width) / 2 - 30 - (musicIcon.size + parent.spacing)
                Text {
                    width: parent.width
                    color: p_theme.currentTheme().fontColor
                    text: playContent.musicName
                    font.pointSize: 11
                    elide: Text.ElideRight
                    MouseArea {
                        anchors.fill: parent
                        onDoubleClicked: {
                            copyEdit.selectAll();
                            copyEdit.copy();
                            print(copyEdit.text);
                            toast.show("歌曲名称拷贝成功");
                        }
                    }
                    TextEdit {
                        id: copyEdit
                        text: playContent.musicName
                        visible: false
                    }
                }
                Text {
                    width: parent.width
                    color: p_theme.currentTheme().fontColor
                    text: playContent.author
                    font.pointSize: 9
                    elide: Text.ElideRight
                }
                ToolTipButton {
                    size: 30
                    iconSource: 'qrc:/icon/collect.svg'
                    iconScale: 0.7
                    property bool isCollect: playContent.hasCollect()
                    property var currentPlayerInfo: playContent.currentPlayerInfo
                    onCurrentPlayerInfoChanged: {
                        isCollect = playContent.hasCollect();
                    }
                    iconColor: isCollect ? p_theme.currentTheme().fontColor : '#fff'
                    onClick: {
                        if (playContent.currentPlayerInfo.id === 0) {
                            return;
                        }
                        if (playContent.hasCollect()) {
                            playContent.unCollectMusic();
                            toast.show("取消收藏成功");
                        } else {
                            playContent.collectMusic();
                            toast.show("收藏成功");
                        }
                        isCollect = playContent.hasCollect();
                    }
                }
            }
        }
        Row {
            anchors.bottom: bottomBarSlider.top
            // anchors.bottomMargin: 10
            spacing: 4
            anchors.horizontalCenter: bottomBarSlider.horizontalCenter
            height: 48
            ToolTipButton {
                id: playerModelTipButton
                anchors.verticalCenter: parent.verticalCenter
                anchors.rightMargin: 30
                size: 35
                iconScale: 0.6
                property var tips: ["单曲循环", "顺序播放", "随机播放"]
                iconSource: switch (playContent.playerModel) {
                case 0:
                    return "qrc:/icon/single-playe.svg";
                case 1:
                    return "qrc:/icon/sequential-player.svg";
                case 2:
                    return "qrc:/icon/random-play.svg";
                }
                onClick: {
                    if (playContent.playerModel >= 2) {
                        playContent.playerModel = 0;
                    } else {
                        playContent.playerModel += 1;
                    }
                    toast.show(tips[playContent.playerModel]);
                }
            }
            ToolTipButton {
                id: preButton
                size: 42
                iconScale: 0.7
                anchors.verticalCenter: parent.verticalCenter
                iconSource: "qrc:/icon/pre.svg"
                iconColor: p_theme.currentTheme().fontColor
                onClick: {
                    playContent.requestPrePlayer();
                }
            }
            ToolTipButton {
                size: 45
                iconScale: 0.8
                anchors.verticalCenter: parent.verticalCenter
                iconSource: player ? "qrc:/icon/stop.svg" : "qrc:/icon/player.svg"
                iconColor: p_theme.currentTheme().fontColor
                onClick: {
                    playContent.requestPlayOrStop();
                }
            }
            ToolTipButton {
                size: 42
                iconScale: 0.7
                anchors.verticalCenter: parent.verticalCenter
                iconSource: "qrc:/icon/next.svg"
                iconColor: p_theme.currentTheme().fontColor
                onClick: {
                    playContent.requestNextPlay();
                }
            }
        }
        Slider {
            id: bottomBarSlider
            width: parent.width / 2
            y: 50
            anchors.right: parent.right
            anchors.rightMargin: 30
            // anchors.topMargin: 15
            property bool isDown: false
            snapMode: Slider.SnapOnRelease
            from: 0
            to: 200
            value: playContent.duration === 0 ? 0 : (playContent.position / playContent.duration * 200)
            height: 5
            background: Rectangle {
                anchors.centerIn: bottomBarSlider
                color: "#1F" + p_theme.currentTheme().subBackgroundColor2
                width: bottomBarSlider.availableWidth
                height: 5
                Rectangle {
                    width: bottomBarSlider.visualPosition * bottomBarSlider.availableWidth
                    height: parent.height
                    color: "#FF" + p_theme.currentTheme().subBackgroundColor2
                }
            }
            onValueChanged: {
                if (isDown)
                    return;
                valueChangedCallback();
            }
            onIsDownChanged: {
                if (!isDown) {
                    valueChangedCallback();
                }
            }

            function valueChangedCallback() {
                if (value !== (playContent.duration === 0 ? 0 : (playContent.position / playContent.duration * 200))) {
                    playContent.position = value / 200 * playContent.duration;
                    value = Qt.binding(() => playContent.duration === 0 ? 0 : (playContent.position / playContent.duration * 200));
                }
            }

            handle: Rectangle {
                implicitWidth: 17
                implicitHeight: 17
                y: (bottomBarSlider.height - height) / 2
                x: bottomBarSlider.position * bottomBarSlider.availableWidth - implicitWidth / 2
                radius: 10
                border.width: 1.5
                border.color: "#FF" + p_theme.currentTheme().subBackgroundColor2
                color: bottomBarSlider.pressed ? p_theme.currentTheme().backgroundColor : "white"
                scale: bottomBarSlider.pressed ? 0.9 : 1

                Behavior on scale {
                    NumberAnimation {
                        duration: 200
                        easing.type: Easing.InOutQuad
                    }
                }
                Behavior on color {
                    ColorAnimation {
                        duration: 200
                        easing.type: Easing.InOutQuad
                    }
                }
                MouseArea {
                    id: handleMouseArea
                    property int startX: 0
                    property int startValue: 0
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    onPositionChanged: function (mouse) {
                        const _width = bottomBarSlider.availableWidth;
                        const offsetX = mouseX - startX;
                        let val = Math.min(200, bottomBarSlider.value + offsetX / _width * 200);
                        val = Math.floor(Math.max(val, 0));
                        bottomBarSlider.value = val;
                    }
                    onPressedChanged: function (mouse) {
                        startX = mouseX;
                        startValue = bottomBarSlider.value;
                        bottomBarSlider.pressed = pressed;
                    }
                    onEntered: {
                        bottomBarSlider.isDown = true;
                    }

                    onReleased: {
                        bottomBarSlider.isDown = false;
                    }
                }
            }
        }
        Row {
            id: bottomLeftSpan
            anchors.left: bottomBarSlider.left
            anchors.leftMargin: 10
            anchors.top: bottomBarSlider.bottom
            width: parent.width / 2
            height: 20
            anchors.topMargin: 12
            Text {
                id: currentTime
                text: U.timeFormat(playContent.position)
                color: theme.fontColor
                font.pointSize: 9
                anchors.verticalCenter: parent.verticalCenter
            }
            Text {
                text: " / "
                color: theme.fontColor
                font.pointSize: 9
                anchors.verticalCenter: parent.verticalCenter
            }
            Text {
                id: allTime
                text: U.timeFormat(playContent.duration)
                color: theme.fontColor
                font.pointSize: 9
                anchors.verticalCenter: parent.verticalCenter
            }
        }
        Item {
            id: bottomRightSpan
            anchors.right: bottomBarSlider.right
            anchors.rightMargin: 10
            anchors.top: bottomBarSlider.bottom
            width: parent.width / 2
            height: 20
            anchors.topMargin: 10

            Slider {
                id: volumeSlider
                width: 120
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                from: 0
                to: 100
                value: 0
                height: 3
                // property double volume: value
                background: Rectangle {
                    color: "#1F" + p_theme.currentTheme().subBackgroundColor2
                    Rectangle {
                        width: volumeSlider.visualPosition * volumeSlider.width
                        height: parent.height
                        color: "#FF" + p_theme.currentTheme().subBackgroundColor2
                    }
                }
                handle: Rectangle {
                    implicitWidth: 10
                    implicitHeight: 10
                    y: (volumeSlider.height - implicitHeight) / 2
                    x: volumeSlider.visualPosition * parent.width - implicitWidth / 2
                    radius: 5
                    border.width: 1
                    border.color: "#FF" + p_theme.currentTheme().subBackgroundColor2
                    color: volumeSlider.pressed ? p_theme.currentTheme().backgroundColor : "white"
                    scale: volumeSlider.pressed ? 0.9 : 1
                    Behavior on scale {
                        NumberAnimation {
                            duration: 200
                            easing.type: Easing.InOutQuad
                        }
                    }
                    Behavior on color {
                        ColorAnimation {
                            duration: 200
                            easing.type: Easing.InOutQuad
                        }
                    }
                    MouseArea {
                        property int startX: 0
                        property int startValue: 0
                        anchors.fill: parent
                        cursorShape: Qt.PointingHandCursor
                        onPositionChanged: function (mouse) {
                            const _width = volumeSlider.availableWidth;
                            const offsetX = mouseX - startX;
                            let val = Math.min(100, volumeSlider.value + offsetX / _width * 100);
                            val = Math.floor(Math.max(val, 0));
                            volumeSlider.value = val;
                        }
                        onPressedChanged: function (mouse) {
                            startX = mouseX;
                            startValue = volumeSlider.value;
                            volumeSlider.pressed = pressed;
                        }
                    }
                }
                Component.onCompleted: {
                    value = volume;
                }
                onValueChanged: {
                    volume = value;
                }
                MouseArea {
                    onClicked: {
                        this.mousemovexX;
                    }
                }
            }
            ToolTipButton {
                id: volumeIcon
                anchors.right: volumeSlider.left
                anchors.rightMargin: 10
                anchors.verticalCenter: parent.verticalCenter
                size: 25
                iconScale: 0.8
                iconSource: "qrc:/icon/volume.svg"
                onClick: {
                    mute = !mute;
                }
            }
            Image {
                opacity: mute ? 1 : 0
                scale: mute ? 1 : 3
                width: 12
                height: 12
                anchors.centerIn: volumeIcon
                source: "qrc:/icon/quit.svg"
                ColorOverlay {
                    anchors.fill: parent
                    color: "#fff"
                    source: parent
                }
                Behavior on scale {
                    NumberAnimation {
                        easing.type: Easing.InOutExpo
                        duration: 500
                    }
                }
                Behavior on opacity {
                    NumberAnimation {
                        easing.type: Easing.InOutExpo
                        duration: 500
                    }
                }
            }
        }
    }
}
